<template>   
    <div class="main-aside" element-loading-background="#303133" v-loading="isMainAsideLoading">
        <div class="main-aside-menu" :style="{ 'background-color': darkColor}">
            <el-menu :default-active="mainMenuActive" :collapse="!isMainMenuExtend" :unique-opened="true" :router="true" :background-color="darkColor" text-color="#ffffff" @select="handleMenuSelect">  
                <template v-for="primary in menuData">
                    <el-submenu :key="primary.MENU_ID" :index="primary.MENU_HREF" v-if="primary.subitem && primary.subitem.length!=0">
                        <template slot="title">
                            <i :class="primary.MENU_ICON_PATH" aria-hidden="true"></i>
                            <span slot="title">{{primary.MENU_NAME}}</span>
                        </template>
                        <template v-for="secondary in primary.subitem">
                            <el-submenu :key="secondary.MENU_ID" :index="secondary.MENU_HREF" v-if="secondary.subitem && secondary.subitem.length!=0">
                                <!--三级菜单-->
                                <!--<template slot="title">-->
                                    <!--<i :class="secondary.icon" aria-hidden="true"></i>-->
                                    <!--<span slot="title">{{secondary.title}}</span>-->
                                <!--</template>-->
                                <!--<template v-for="tertiary in secondary.subitem">-->
                                    <!--<el-menu-item :key="tertiary.index" :index="tertiary.index">{{tertiary.title}}</el-menu-item>-->
                                <!--</template>-->
                            </el-submenu>
                            <template v-else>
                                <el-menu-item :key="secondary.MENU_ID" :index="secondary.MENU_HREF">{{secondary.MENU_NAME}}</el-menu-item>
                            </template>
                        </template>
                    </el-submenu>
                    <el-menu-item class="main-aside-menu-home" :key="primary.MENU_ID" :index="primary.MENU_HREF" v-else>
                        <i :class="primary.MENU_ICON_PATH" aria-hidden="true"></i>
                        <span slot="title">{{primary.MENU_NAME}}</span>
                    </el-menu-item>
                </template>                                                             
            </el-menu>
        </div>
        <div class="main-aside-options" :style="{ 'background-color': darkerColor}">
            <div class="main-aside-buttons">
                <el-tooltip effect="dark" content="折叠菜单" placement="right">
                    <el-switch v-model="isMainMenuExtend"></el-switch>
                </el-tooltip>
            </div>        
        </div>
    </div>
</template>

<script>
import api from 'api'
import { mapState, mapMutations } from 'vuex'

export default {
    name: 'MainAside',
    data () {
        return {         
            isMainAsideLoading: false,  // 加载 - MainAside
            isMainMenuExtend: true  // 是否展开菜单
        }
    },
    computed: {
        ...mapState({
            darkColor: state => state.configCommon.darkColor,  // 深色调
            darkerColor: state => state.configCommon.darkerColor,  // 较深色调
            mainMenuActive: state => state.main.mainMenuActive,  // 激活菜单
            menuData: state => state.main.menuData  // 菜单数据         
        })
    },
    watch: {
        // 监听是否展开菜单
        isMainMenuExtend: {
            handler(n ,o) {
                this.$emit('changeMainMenuWidth', n)
            },
            immediate: true
        }
    },
    methods: {
        ...mapMutations(['mutaSetMainMenuActive']),
        // 处理选择菜单
        handleMenuSelect(index) {
            this.mutaSetMainMenuActive({mainMenuActive: index})
        }
    }
}
</script>

<style scoped>
.main-aside {
    width: 100%;
    height: 100%;   
    display: flex;
    flex-direction: column
}
.main-aside-menu {
    flex: 1;
    overflow-y: scroll;
    scrollbar-color: transparent transparent;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
}
.main-aside-menu::-webkit-scrollbar{
    width: 0!important;
}
.el-menu {
    width: 100%;
    border: 0
}
.el-menu:not(.el-menu--collapse) {
    width: 200px;
}
.el-menu i {      
    width: 26px;
    height: 26px;
    line-height: 26px;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    margin-right: 10px
}
.el-menu--popup .el-submenu i, .el-menu--inline .el-submenu i {
    font-size: 18px
}
.el-submenu .el-menu-item {
    padding: 0 !important;
    text-align: center
}
.el-menu-item:not(.main-aside-menu-home) {
    height: 34px;
    line-height: 34px;
    min-width: inherit
}
.el-menu-item.is-active {
    background-color: #409eff !important;
    color: #ffffff
}
.main-aside-menu-home {
    height: 50px;
    line-height: 50px;
    font-size: 16px
}
.main-aside-menu-home i{
    font-size: 26px
}
.main-aside-options {
    height: 50px
}
.main-aside-buttons {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}
.main-aside-buttons i {
    height: 100%;      
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center
}
</style>